<template lang='pug'>
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 日期：
          DatePicker( :value="searchData.Date" placeholder="请选择" clearable @on-change="dateChange")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 团队名称：
          Input(v-model="searchData.TeamName" placeholder="请输入" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          Button.ml-15(type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe border :columns="thead" :data="listData" @on-selection-change="tableSelectChange")
        div(slot="header")
          .pull-left.table-title-lefttxt
            span.leftText
              | 合计:
              span.text-info.pl-5.pr-5.font-weight {{totalRows}}
              | 条
          .pull-right.table-title-btns
            Button.mr-15(type="info" @click="exportBtn") 导出
        template(slot-scope="{ row, index }" slot="userName")
          .font-12.time-td.ellipsis.cursor-pointer(v-for="(item,index) in row.details" :key="index" @click="checkUserFinsh(item.userId, item.userName)")
            span.u-d-info {{item.userName}}
        template(slot-scope="{ row, index }" slot="yearTarget")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.yearTarget}}
        template(slot-scope="{ row, index }" slot="year_SignedAmt")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.year_SignedAmt}}
        template(slot-scope="{ row, index }" slot="monthTarget")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.monthTarget}}
        template(slot-scope="{ row, index }" slot="month_SignedAmt")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.month_SignedAmt}}
        template(slot-scope="{ row, index }" slot="month_FinishRate")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.month_FinishRate}}%
        template(slot-scope="{ row, index }" slot="weekTarget")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.weekTarget}}
        template(slot-scope="{ row, index }" slot="week_SignedAmt")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.week_SignedAmt}}
        template(slot-scope="{ row, index }" slot="year_FinishRate")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.year_FinishRate}}%
        template(slot-scope="{ row, index }" slot="year_DifferenceAmt")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.year_DifferenceAmt}}
        template(slot-scope="{ row, index }" slot="month_AvgFinishRate")
          .font-12.time-td.ellipsis(v-for="(item,index) in row.details" :key="index")
            span {{item.month_AvgFinishRate}}%
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="totalRows" :current="searchData.PageIndex" :page-size="searchData.PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
    salesData(ref="salesData" :name="userName" :listData="modalListData" :tableName="tableName" :target="target" :finish="finish" :rate="rate" :loading="modalLoading")
</template>

<script>
import KanbanApi from '../service.api.js'
import salesData  from './modal.vue'

export default {
  name:'',
  props:{},
  data () {
    return {
      teamIds: '',
      searchData: {
        Date:this.$moment(new Date()).format('YYYY-MM-DD'),
        TeamName: '',
        PageIndex: 1,
        PageSize: 10
      },
      userName: '',
      thead: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '团队',
          minWidth: 150,
          align: 'center',
          key: 'teamName'
        },
        {
          title: '团队年度合同目标',
          minWidth: 120,
          align: 'center',
          key: 'yearTarget'
        },
        {
          title: '团队年度合同完成情况',
          minWidth: 120,
          align: 'center',
          key: 'year_SignedAmt'
        },        
        {
          title: '团队年度合同完成率',
          minWidth: 120,
          align: 'center',
          key: 'year_FinishRate',
          render: (h, params) => {
            let row = params.row
            let text = row.year_FinishRate + '%'
            return h('span', text)
          }
        },
        {
          title: '月度合同目标总和',
          minWidth: 120,
          align: 'center',
          key: 'monthTarget',
        },
        {
          title: '月度合同完成情况总和',
          minWidth: 120,
          align: 'center',
          key: 'month_SignedAmt',
        },
        {
          title: '姓名',
          minWidth: 100,
          align: 'center',
          slot: 'userName',
          className: 'no-padding'
        },
        {
          title: '年度合同目标',
          minWidth: 100,
          align: 'center',
          slot: 'yearTarget',
          className: 'no-padding'
        },
        {
          title: '年度合同完成情况',
          minWidth: 100,
          align: 'center',
          slot: 'year_SignedAmt',
          className: 'no-padding'
        },        
        {
          title: '年度合同完成率',
          minWidth: 100,
          align: 'center',
          slot: 'year_FinishRate',
          className: 'no-padding'
        },
        {
          title: '年度合同差距',
          minWidth: 100,
          align: 'center',
          slot: 'year_DifferenceAmt',
          className: 'no-padding'
        },
        {
          title: '月度合同目标',
          minWidth: 100,
          align: 'center',
          slot: 'monthTarget',
          className: 'no-padding'
        },
        {
          title: '月度合同完成情况',
          minWidth: 100,
          align: 'center',
          slot: 'month_SignedAmt',
          className: 'no-padding'
        },
        {
          title: '月度合同完成率',
          minWidth: 100,
          align: 'center',
          slot: 'month_FinishRate',
          className: 'no-padding'
        },
        {
          title: '月度过程完成率',
          minWidth: 100,
          align: 'center',
          slot: 'month_AvgFinishRate',
          className: 'no-padding'
        },
        {
          title: '周合同目标',
          minWidth: 100,
          align: 'center',
          slot: 'weekTarget',
          className: 'no-padding'
        },
        {
          title: '周合同完成情况',
          minWidth: 100,
          align: 'center',
          slot: 'week_SignedAmt',
          className: 'no-padding'
        },
      ],
      loading: false,
      listData: [],
      totalRows: 0,
      modalListData: [],
      tableName: ['年目标','月度合同目标金额','月度A开发目标数量','月度B开发目标数量','月度C开发目标数量','周合同目标金额','周A开发目标数量','周B开发目标数量','周C开发目标数量'],
      target: [],
      finish: [],
      rate: [],
      modalLoading: false
    };
  },

  components: {
    salesData,
  },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList()
  },

  methods: {
    getList () {
      this.loading = true
      KanbanApi.GetList(this.searchData).then(res => {
        this.loading = false
        console.log(res)
        if (res.data.success) {
          this.listData = res.data.data
          this.totalRows = res.data.totalRows
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleSpan ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 2 && columnIndex === 0) {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    searchBtn () {
      this.searchData.PageIndex = 1
      this.getList()
    },
    tableSelectChange (val) {
      console.log(val)
      let arr = val.map(_ => {
        return _.teamId
      })
      this.teamIds = arr.join(',')
    },
    pageChangeFn (val) {
      this.searchData.PageIndex = val
      this.getList()
    },
    onpageSizeChange (val) {
      this.searchData.PageSize = val
      this.getList()
    },
    dateChange (val) {
      console.log(val)
      this.searchData.Date = val
    },
    checkUserFinsh (id, name) {
      this.userName = name
      this.modalLoading = true
      KanbanApi.GetKanbanList({
        UserIds: id,
        Date: this.searchData.Date
      }).then(res => {
        this.modalLoading = false
        let arr_1 = [], arr_2 = [], arr_3 = []
        if (res.data.success) {
          this.modalListData = res.data.data
          res.data.data.forEach(item => {
            arr_1.push(item.yearTarget, item.monthTarget, item.month_ATargetCount, item.month_BTargetCount, item.month_CTargetCount, item.weekTarget, item.week_ATargetCount, item.week_BTargetCount, item.week_CTargetCount)

            arr_2.push(item.year_SignedAmt, item.month_SignedAmt, item.month_AFinishCount, item.month_BFinishCount, item.month_CFinishCount, item.week_SignedAmt, item.week_AFinishCount, item.week_BFinishCount, item.week_CFinishCount)

            arr_3.push(item.year_FinishRate, item.month_FinishRate, item.month_AFinishRate, item.month_BFinishRate, item.month_CFinishRate, item.week_FinishRate, item.week_AFinishRate, item.week_BFinishRate, item.week_CFinishRate)
            this.target = arr_1
            this.finish = arr_2
            this.rate = arr_3
          })
        } else {
          this.$Message.error(res.data.message)
        }
      })
      this.$refs.salesData.show()
    },
    exportBtn () {
      KanbanApi.Export({
        teamIds: this.teamIds,
        Date: this.searchData.Date,
        TeamName: this.searchData.TeamName
      }).then(res => {
        if (res.data.success) {
          let objectUrl = res.data.data
          const link = document.createElement('a')
          link.download = ''
          link.href = objectUrl
          link.click()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    }
  },

  watch: {}

}

</script>
<style lang="less">
  .no-padding{
    .ivu-table-cell{
      padding: 0 !important;
    }
    .ivu-poptip{
      width: 100%;
      height: 100%;
    }
    .ivu-poptip-rel{
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  th{
    &.no-padding{
      .ivu-table-cell{
        padding: 0 18px !important;
      }
    }
  }
</style>

<style lang='less' scoped>
  .d-flex{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .target{
    text-align: left;
  }
  .time-td{
    padding: 2px 4px;
    height: 56px;
    text-align: center;
    line-height: 52px;
    border-bottom: 1px solid #cfeef9;
    // cursor: pointer;
    &:last-child{
      border-bottom: none;
    }
  }
  .poptip-ul{
    color: #333;
  }
</style>